<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<script src="../day04/js/jquery.min.js"></script>
		<style >
			[v-cloak]{
				display: none;
			}
			body{
				background-color: aqua;
				margin: 100px;
				align-content: center;
			}
			div{
				background-color: aquamarine;
			}
			input{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		
		<div id="app" v-cloak>
			<h2>地址：{{address}}</h2>
			
			<!--vue实现双向绑定：v-model-->
			<input type="text" id="address" v-model="address"/>
			<!--v-cloak解决页面闪现问题-->
			
			<div>姓名：{{name}}</div>
			<div>年龄：{{age}}</div>
			<div>{{hobby}},{{hobby.length}}</div>
			<div>爱好：{{hobby[0]}}</div>
			<div>爱好：{{hobby[hobby.length-1]}}</div>
			<!--v-for循环指令
			hobby是数组，o是每次遍历当前值-->
			<span>爱好：</span>
			<span v-for=" o in hobby">{{o}}</span>
			<div v-for="o,i in hobby">{{i}}-{{o}}</div>
			<div>我的财富指数：</div>
			<div v-if="money>=1900">一线不差钱</div>
			<div v-else-if="money>=1200">二线不差钱</div>
			<div v-else-if="money>=600">二线不差钱</div>
			<div v-else>屌丝</div>
			<!--往常的差值表达式写在页面上，这是写在属性中
			错误原因：他把整体当做字符串，而不是插值表达式
			解决办法：去掉括号，在属性前面加冒号
			告诉vue这个属性后面的值是变量，不是字符串，必须解析-->
			<!--<a href="{{url}}" targer="blank">百合网</a> 错误案例-->
			<a :href="url" targer="blank">百合网</a>
			
			<button onclick="alert('点我又惊喜啊')">点我</button>
			<!--vue事件 v-on按钮指令
			创建vue方法  show
			-->
			<button v-on:click="show">vue按钮</button>
			
			
			<hr />
			
			<!--对象的方式-->
			<div>{{girl}}</div>
			<div>对象姓名：{{girl.name}}</div>
			<div>对象年龄：{{girl.age}}</div>
			<div>对象地址：{{girl.address}}</div>
			<!--判断，如果age>=18(成年)，<18未成年
			如果判断true就展现后面内容，false就不展现-->
			
			<span>对象是否成年：</span>
			<span v-if="girl.age>=18">你的对象已成年</span>
			
			<span v-if="girl.age<18">你的对象未成年</span>
			<div v-show="girl.age<=18">未成年</div>
			<div v-show="girl.age>18">成年</div>
		</div>
	</body>
</html>

<script>
	 var vm=new Vue({
		el:"#app",
		data:{//vue数据区
			address:"北京颐和园",
			name:"小波",
			age:23,
			hobby:["篮球","唱","跳","rap"],
			money:2000,
			url:"http://www.baidu.com",
		    girl:{
				address:"东方明珠",
				age:16,
				name:"rose"
			}
		} ,
		methods:{//vue方法区
			show:function(){//定义一个函数，点击按钮执行show方法
			console.log("vue的show function")
			
				
			}
		}
	})
</script>